<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-loading [lvLoading]='loading'>
  <div class="performance-container">
    <div class="performance-title">
      <div class="tittle">
        <h1>{{'common_performance_label' | i18n}}</h1>
        <div class="aui-operation">
          <lv-group lvGutter='8px'>
            <lv-select class="home-perfomance-time-select" [(ngModel)]="performanceTimeOption"
              [lvOptions]='performanceTimeOptions' (ngModelChange)="selectChange($event)" lvValueKey='value'>
            </lv-select>
            <button class="aui-button-icon" lv-button lvSize="auto" (click)="refresh()">
              <i lv-icon="lv-icon-refresh" [lvColorState]="true"></i>
            </button>
          </lv-group>
        </div>
      </div>
      <div class="performance-subtitle" *ngIf="showChart">
        <h2 class="subtittle">{{'common_total_bindwidth_label' | i18n}}</h2>
        <div>
          <span class="performance-subtitle-number">{{readAvg | capacityCalculateLabel:'1.1-3':unitconst.KB:
            true}}/s</span>
          <span class="performance-subtitle-unit">{{'common_avg_label' | i18n}}</span>
        </div>
      </div>
    </div>
    <div class="performance-chart-container" *ngIf="showChart">
      <div id="performance-chart"></div>
    </div>
    <div class="performance-no-data" *ngIf="!showChart">
      <lv-empty></lv-empty>
    </div>
  </div>
</lv-loading>